<template>
  <div class="company-style">
    <NavBarVue :title="title" />
    <van-pull-refresh v-model="isRefreshLoading" @refresh="onLoad">
      <div class="content-top jobs-index">
        <MyEmpty v-if="isLoading === false && list.length === 0" />
        <van-list class="list">
          <div class="item" v-for="(item, index) in list" :key="index">
            <div class="info">
              <div class="checkbox">
                <van-checkbox
                  v-model="item.checked"
                  checked-color="#07f"
                ></van-checkbox>
              </div>
              <div class="left">
                <b>{{ item.jobName }}</b>
                <p
                  v-if="
                    item.isRefresh === true ||
                    item.isTop === true ||
                    item.isAutoZFB === true ||
                    item.isNoOperat === true
                  "
                >
                  <small class="good" v-if="item.isRefresh === true"
                    >已刷新</small
                  >
                  <small class="good" v-if="item.isTop === true"
                    >排名靠前</small
                  >
                  <small class="good" v-if="item.isAutoZFB === true"
                    >自动再发布</small
                  >
                  <small class="bad" v-if="item.isNoOperat === true"
                    >长期未维护</small
                  >
                </p>
                <p>
                  <span class="end">{{ item.endDateStr }}</span>
                  <i></i>
                  <span class="look">{{ item.viewCount }}</span>
                </p>
              </div>
            </div>
          </div>
        </van-list>
      </div>
    </van-pull-refresh>
    <!-- 批量操作start -->
    <div class="jobs-batch-btns">
      <p>
        <van-checkbox
          v-model="checkedAll"
          checked-color="#07f"
          @click="onCheckAllClick"
          >全选</van-checkbox
        >
        <span>（{{ select_job.length }}/{{ list.length }}）</span>
      </p>
      <p>
        <van-button
          type="primary"
          text="刷新"
          @click="doOperat('SRefresh')"
        ></van-button>
        <van-button
          type="primary"
          text="停止"
          @click="doOperat('Stop')"
        ></van-button>
        <van-button
          type="primary"
          text="再发布"
          @click="doOperat('ZFB')"
        ></van-button>
      </p>
    </div>
    <!-- end -->
  </div>
</template>

<script>
import { List, PullRefresh, Dialog, Toast, Checkbox, Button } from "vant";
import MyEmpty from "@/components/MyEmpty.vue";
import { CompanyJobGetMyJobs, CompanyJobOperatJobs } from "@/util/http";
import NavBarVue from "@/components/NavBar.vue";
import Global from "@/Global";
export default {
  name: "JobOnlineBatch",
  components: {
    NavBarVue,
    MyEmpty,
    [List.name]: List,
    [PullRefresh.name]: PullRefresh,
    [Checkbox.name]: Checkbox,
    [Button.name]: Button,
  },
  props: ["title"],
  mounted() {
    this.onLoad();
  },
  // 定义属性
  data() {
    return {
      isRefreshLoading: false,
      list: [],
      page: 0,
      isLoading: true,
      finished: false,
      select_job: [],
      checkedAll: false,
    };
  },
  watch: {
    list: {
      deep: true,
      handler: function (newV, oldV) {
        // console.log("watch");
        this.select_job = [];
        newV.forEach((item) => {
          if (item.checked) {
            this.select_job.push(item.jobid);
          }
        });
        this.checkedAll =
          this.list.length != 0 && this.select_job.length === this.list.length;
      },
    },
  },
  // 方法集合
  methods: {
    onLoad() {
      if (this.isRefreshLoading) {
        this.page = 0;
      }
      let page = this.page;
      page++;
      this.page = page;
      CompanyJobGetMyJobs(page, "1").then((res) => {
        // console.log(res);
        this.isLoading = false;
        if (this.isRefreshLoading) {
          this.list = [];
        }
        this.isRefreshLoading = false;
        let list = res;
        if (list.length > 0) {
          list.forEach((item) => {
            item.checked = false;
          });
          this.list = [...this.list, ...list];
          this.finished = false;
        } else {
          this.finished = true;
        }
      });
    },
    onRefresh() {
      //   console.log("onRefresh");
      this.isLoading = true;
      this.page = 0;
      this.list = [];
      this.onLoad();
    },
    doOperat(operat) {
      if (this.select_job.length === 0) {
        Toast("请选择职位");
        return;
      }
      let jobIDs = this.select_job.join();
      if (operat === "ZFB") {
        Dialog.confirm({
          message: `检测到再发布${jobIDs.split(",").length}个职位，将扣除${
            jobIDs.split(",").length
          }个职位数？`,
          confirmButtonText: "再发布",
        })
          .then(() => {
            this.subOperat(jobIDs, operat);
          })
          .catch(() => {
            // on cancel
          });
      } else if (operat === "Stop") {
        Dialog.confirm({
          message: "确认停止这些职位？",
          confirmButtonText: "停止",
        })
          .then(() => {
            this.subOperat(jobIDs, operat);
          })
          .catch(() => {
            // on cancel
          });
      } else {
        this.subOperat(jobIDs, operat);
      }
    },
    subOperat(jobIDs, operat) {
      CompanyJobOperatJobs({ jobIDs, operat }).then((res) => {
        // console.log(res);
        Toast(res.msg);
        if (res.result > 0) {
          this.onRefresh();
          this.$bus.$emit(Global.bus_company_joblist_update, "1");
        }
      });
    },
    onCheckAllClick() {
      if (this.checkedAll) {
        this.list.forEach((item) => {
          item.checked = true;
        });
      } else {
        this.list.forEach((item) => {
          item.checked = false;
        });
      }
    },
  },
};
</script>

<style lang="less">
@import "vant/lib/index.less";
@import "@/assets/css/company.less";
</style>
